<template>
  <div>
    <span style="margin-left:20px ;">订单ID </span> <el-input v-model="orderId" autocomplete="off" placeholder="请输入订单号" style="width: 15%;"></el-input>&nbsp;
    <span style="margin-left:5px ;">会员ID </span> <el-input v-model="memberId" autocomplete="off" placeholder="请输入会员ID" style="width: 15%;"></el-input>&nbsp;
    下单时间 <el-date-picker v-model="startTime" type="date" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker> 至
    <el-date-picker v-model="endTime" type="date" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <el-button type="primary" @click="searchEmp()" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
    <br><br>
    <span style="margin-left:10px ;">订单类型</span><el-select v-model="orderType" placeholder="订单类型">
      <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1">
      </el-option>
    </el-select>
    <span style="margin-left:40px ;">所属店铺 </span>
      <el-select v-model="belongingStoreId" placeholder="所属店铺">
        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name" :value="item.belongingStoreId">
        </el-option>
      </el-select>
      <span style="margin-left:45px ;">支付状态</span> <el-select v-model="paymentStatus" placeholder="支付状态">
      <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2">
      </el-option>
    </el-select>
    配送方式 <el-select v-model="distributionStatus" placeholder="配送方式">
      <el-option v-for="item in options3" :key="item.value3" :label="item.label3" :value="item.value3">
      </el-option>
    </el-select>


    <!-- 展示页面的表格 -->
    <el-table :data="unitList" v-loading="listLoading" element-loading-text="Loading" border:true fit
      highlight-current-row stripe style="width: 100%" >

      <el-table-column prop="orderId" label="订单ID" width="80">
      </el-table-column>
      <el-table-column prop="memberName" label="会员名称" width="100">
      </el-table-column>
      <el-table-column prop="orderType" label="订单类型" width="120">
      </el-table-column>
      <el-table-column prop="shopName" label="所属商铺" width="120">
      </el-table-column>
      <el-table-column prop="totalAmount" label="总金额" width="100">
      </el-table-column>
      <el-table-column prop="paymentStatus" label="支付状态" width="100">
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100">
      </el-table-column>
      <el-table-column prop="distributionStatus" label="配送方式" width="100">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="150">
      </el-table-column>
      <el-table-column prop="paymentAmount" label="支付金额" width="100">
      </el-table-column>
      <el-table-column prop="discountAmount" label="优惠金额" width="100">
      </el-table-column>
      <el-table-column prop="points" label="积分" width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
          <el-button size="mini" @click="orderDetail(scope.$index, scope.row)" type="info">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 修改客户信息弹出模态框 -->
    <el-dialog title="修改订单信息" :visible.sync="dialogUpdateVisible">
      <el-form :model="form">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="form.orderId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单类型" :label-width="formLabelWidth">
          <el-select v-model="form.orderType" placeholder="订单类型">
            <el-option label="商品订单" value="商品订单"></el-option>
            <el-option label="付款订单" value="付款订单"></el-option>
            <el-option label="充值订单" value="充值订单"></el-option>
            <el-option label="储值卡订单" value="储值卡订单"></el-option>
            <el-option label="会员升级订单" value="会员升级订单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单总金额" :label-width="formLabelWidth">
          <el-input v-model="form.totalAmount" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="优惠金额" :label-width="formLabelWidth">
          <el-input v-model="form.discountAmount" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-select v-model="form.orderStatus" placeholder="订单状态">
            <el-option label="未配送" value="未配送"></el-option>
            <el-option label="已配送" value="已配送"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUnit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>


// 导入api/customer.js中定义接口

import { orderPage, oneOrder, updateOrder, deleteOrder } from "@/api/orderList";
import { getShops } from "@/api/shopList"



export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      unitList: [],
      listLoading: true,
      dialogUpdateVisible: false,
      dialogExcelVisible: false,
      form: {},
      formLabelWidth: "120px",
      currentPage: 1,
      total: 0,
      pageSize: 5,
      options1: [{ value1: '商品订单', label1: '商品订单' },
      { value1: '付款订单', label1: '付款订单', disabled: true },
      { value1: '充值订单', label1: '充值订单' },
      { value1: '储蓄卡订单', label1: '储蓄卡订单' },
      { value1: '会员升级订单', label1: '会员升级订单' },],
      options2: [{ value2: '未支付', label2: '未支付' },
      { value2: '已支付', label2: '已支付', disabled: true }],
      options3: [{ value3: '自取', label3: '自取' },
      { value3: '配送', label3: '配送', disabled: true }],
      orderId: "",
      memberId: "",
      startTime: "",
      endTime: "",
      belongingStoreId: "",
      paymentStatus: "",
      orderType: "",
      distributionStatus: "",
      shops: [],
    };
  },
  created() {
    this.fetchData();
    this.getShop();
  },
  methods: {
    fetchData() {
      console.log(this.belongingStoreId);

      this.listLoading = true;
      orderPage({
        pageNum: this.currentPage, pageSize: this.pageSize, orderId: this.orderId, memberId: this.memberId,
        startTime: this.startTime, endTime: this.endTime, distributionStatus: this.distributionStatus,
        belongingStoreId: this.belongingStoreId, paymentStatus: this.paymentStatus, orderType: this.orderType
      }).then((response) => {
        console.log(response)
        this.unitList = response.data.list;
        this.total = response.data.total
        this.listLoading = false;
      });
    },
    searchEmp() {
      this.fetchData();
    },
    // 订单详情
    orderDetail(index, row) {
      console.log(index, row);
      this.$router.push({ path: "/order/orderDetail", query: { orderNumber: row.orderNumber , orderDetailName: '订单详情'} });
    },
    // 店铺查询
    getShop() {
      getShops().then((response) => {
        console.log(response.data);
        this.shops = response.data;
      });
    },

    //在查询后重置
    resetSearchForm() {
      this.orderId = "";
      this.memberId = "";
      this.startTime = "";
      this.endTime = "";
      this.orderStatus = "";
      this.belongingStoreId = "";
      this.paymentStatus = "";
      this.orderType = "";
      this.distributionStatus = "";
      this.fetchData();
    },
    //修改计算单位
    updateUnit() {
      updateOrder(this.form).then((response) => {
        if (response.code == 200) {
          this.dialogUpdateVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.fetchData();
        }
      });
    },
    handleEdit(index, row) {
       console.log(index, row);
      oneOrder({ orderId: row.orderId }).then((response) => {
        this.form = response.data;//将查询出来的数据 赋值给表单
        this.dialogUpdateVisible = true;
      });
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteOrder({ orderId: row.orderId }).then((response) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.currentPage = 1,
              this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 每页显示的记录数发生变化触发的操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页发生变化触发的操作
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData(this.code, this.name)
    },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
      this.fetchData();
      this.getShop();
    },
  }
}

</script>
